<template>
  <div>
    <JLForm
      ref="formRef"
      class="search-from"
      :form-config="formConfig"
      :form-data="formData"
      :form-item-config="formItemConfig"
    >
      <template #searchSlot>
        <el-button color="#0560FD" @click="search">查询</el-button>
      </template>
    </JLForm>
    <div class="main-option">
      <div class="title"><SvgIcon icon-class="列表"> </SvgIcon>我的场景</div>
      <el-button class="up-resource" color="#0560FD" @click="createDialogShow = true"
        ><SvgIcon icon-class="add" />创建场景</el-button
      >
    </div>

    <!-- <JLDatagrid :table-config="tableConfig" :column-config="tableColumn" :page-config="pageConfig">
      <template #slotOperation>
        <el-button>预览</el-button>
        <el-button>编辑</el-button>
        <el-button>删除</el-button>
      </template>
    </JLDatagrid> -->

    <div class="card-group">
      <el-scrollbar>
        <div class="card-wrap">
          <div
            class="card-item"
            :id="`scene-card-item-${list.activityId}`"
            v-for="(list, index) in tableData"
            :key="index"
          >
            <div class="icon-wrap">
              <img class="cover" v-if="list.actCover" :src="retFilePath(list.actCover)" alt="" />
              <img class="cover" v-else src="@/assets/png/map.png" alt="" />
              <div class="hover-wrap">
                <div class="count-wrap">
                  <SvgIcon icon-class="ic_查看" />
                  <div class="count">{{ list.usageCount }}</div>
                </div>
                <div class="center-wrap">
                  <div class="svg-wrap">
                    <el-tooltip effect="dark" content="分享" placement="top">
                      <SvgIcon icon-class="分享" @click="onShare(list)" />
                    </el-tooltip>

                    <Download :activity-id="list.activityId" :conifg-id="list.conifgId" />

                    <el-tooltip effect="dark" content="复制" placement="top">
                      <SvgIcon icon-class="复制" @click="onCopy(list)" />
                    </el-tooltip>

                    <el-tooltip effect="dark" content="删除" placement="top">
                      <SvgIcon icon-class="删除" @click="onDelete(list)" />
                    </el-tooltip>
                  </div>
                  <div class="btn-wrap">
                    <div class="btn preview" @click="onPreview(list)">预览</div>
                    <div class="btn edit" @click="onEdit(list)">编辑</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="title-wrap">
              <div class="title">{{ list.activityName }}</div>
              <div class="tag" :class="{ release: list.releState }">
                {{ list.releState ? '已发布' : '未发布' }}
              </div>
            </div>
            <div class="time">{{ dayjs(list.lastTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <div class="page-wrap">
      <Total :num="pageConfig.total" />
      <el-pagination
        class="pager"
        v-if="pageConfig.visible"
        v-model:current-page="pageConfig.currentPage"
        v-model:page-size="pageConfig.pageSize"
        :small="pageConfig.small"
        :page-sizes="pageConfig.pageSizes"
        :layout="pageConfig.layout"
        :total="pageConfig.total"
        :background="pageConfig.background"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </div>

    <CreateDialog v-if="createDialogShow" @close-handle="createCloseHandle"></CreateDialog>
    <CreateShare
      v-if="createShareDialogShow"
      v-model="createShareDialogShow"
      :scene="selScene"
      @close-handle="createShareCloseHandle"
      @update="updateSceneList"
    ></CreateShare>
  </div>
</template>

<script setup lang="ts">
import { copyScene, deleteScene } from '@/api/scene';
import Total from '@/components/pagination/total.vue';
import { confirmAgain, messageAlert, retFilePath } from '@/utils';
import CreateShare from '@/views/scene/create-share/index.vue';
import CreateDialog from '@/views/scene/create/index.vue';
import { JLForm } from '@jl/element-plus';
import { messageUtil } from '@jl/element-plus/utils';
import { dayjs } from 'element-plus';
import { debounce } from 'lodash';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Download from './components/download.vue';
import { list } from './composables/list';

defineOptions({
  name: 'SceneList',
});

const router = useRouter();

const {
  formRef,
  formConfig,
  formData,
  formItemConfig,
  tableRef,
  pageConfig,
  tableConfig,
  tableColumn,
  tableData,
  search,
  pageCurrentChange,
  pageSizeChange,
  proListRun,
} = list();
const createDialogShow = ref(false);
const createShareDialogShow = ref(false);
const selScene = ref<API.Scene.SceneListItem | null>(null);

onMounted(() => {
  proListRun({
    params: {
      index: 1,
      pageSize: 1000,
      blurStr: '',
      state: -1,
    },
  });
  search();
});

const createCloseHandle = (refresh: boolean) => {
  createDialogShow.value = false;
  if (refresh) {
    search(true);
  }
};

const createShareCloseHandle = () => {
  createShareDialogShow.value = false;
};

function onEdit(list: API.Scene.SceneListItem) {
  window.open(`/editor/${list.activityId}/stage`, '_blank');
}

function onPreview(list: API.Scene.SceneListItem) {
  window.open(`/preview/scene/${list.activityId}`, '_blank');
}

async function onDelete(list: API.Scene.SceneListItem) {
  const flag = await confirmAgain('确认删除该场景数据？', '删除操作不可逆，删除后将撤销展示。');
  if (!flag) return;
  deleteScene({ params: { resId: list.activityId } }).then(() => {
    messageUtil.success('删除成功');
    search(true);
  });
}

function onShare(list: API.Scene.SceneListItem) {
  selScene.value = list;
  createShareDialogShow.value = true;
}

const onCopy = debounce(
  (list: API.Scene.SceneListItem) => {
    copyScene({ params: { actId: list.activityId } }).then(() => {
      messageAlert('复制成功', '复制场景成功');
      search(true);
    });
  },
  300,
  {
    leading: true,
    trailing: false,
  }
);

function updateSceneList() {
  search();
}
</script>

<style lang="less" scoped>
.search-btn {
  text-align: right;
}
.main-option {
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 15px !important;
  .title {
    display: flex;
    align-items: center;
    color: #161616;
    font-size: 14px;
    .svg-icon {
      margin-right: 8px;
    }
  }
  .up-resource {
    margin-left: auto;
  }
}
.card-group {
  flex: 1;
  height: 0px;
  width: calc(100% + 16px);
  margin-top: 1rem;
}
.card-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 304px;
  column-gap: 20px;
  row-gap: 20px;
  padding-right: 16px;
  .card-item {
    width: 100%;
    height: 304px;
    background: fade(#e8e8e8, 68%);
    border-radius: 8px;
    padding: 20px;
    border: 2px solid #fff;

    &:hover {
      background: rgba(5, 96, 253, 0.12);
      border-color: #0560fd;
      .icon-wrap {
        .hover-wrap {
          display: flex;
          background-color: rgba(0, 0, 0, 0.4);
          opacity: 1;
        }
      }
    }

    .icon-wrap {
      position: relative;
      height: 200px;
      border-radius: 8px;
      overflow: hidden;
      .cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .hover-wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: none;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(5px);
        opacity: 0;
        .count-wrap {
          position: absolute;
          left: 20px;
          top: 20px;
          display: flex;
          align-items: center;
          color: #fff;
          font-size: 14px;
          .svg-icon {
            font-size: 24px;
            margin-right: 4px;
          }
          .count {
            margin-top: -1px;
          }
        }
        .center-wrap {
          display: flex;
          flex-direction: column;
          align-items: center;
          .svg-wrap {
            width: 100%;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            .svg-icon {
              font-size: 36px;
              cursor: pointer;
              &:last-child {
                margin-right: 0px;
              }
            }
          }
          .btn-wrap {
            display: flex;
            .btn {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 92px;
              height: 36px;
              background: rgba(5, 96, 253, 0.24);
              border-radius: 4px;
              border: 1px solid #0560fd;
              color: #fff;
              cursor: pointer;
              &.edit {
                background: rgba(5, 96, 253, 1);
              }
              &:first-child {
                margin-right: 20px;
              }
            }
          }
        }
      }
    }
    .title-wrap {
      display: flex;
      align-items: center;
      margin-top: 10px;
      .title {
        height: 25px;
        font-size: 18px;
        font-weight: 500;
        color: #161616;
        line-height: 25px;
      }
      .tag {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 68px;
        height: 30px;
        background: #ff5454;
        border-radius: 4px;
        margin-left: auto;
        color: #fff;
        &.release {
          background: #24bd48;
        }
      }
    }
    .time {
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      color: #9a9a9a;
      line-height: 22px;
      margin: 2px 0 10px;
    }
    .desc {
      font-size: 14px;
      font-weight: 400;
      color: #585858;
      line-height: 20px;
    }
  }
}
.page-wrap {
  display: flex;
  align-items: center;
  padding-top: 30px;
  .pager {
    margin-left: auto;
  }
}
</style>
